<a
  [routerLink]="['/home/res/' + id]"
  clrVerticalNavLink
  routerLinkActive="active"
>
  <span class="clr-row clr-justify-content-between">
    <span class="clr-col clr-align-self-start resName">
      <clr-icon [attr.shape]="shape" *ngIf="shape"></clr-icon>&nbsp;
      <span class="resName">
        <clr-icon
          class="is-warning is-solid"
          shape="pause"
          *ngIf="operativity <= 0"
          (click)="setOp100()"
        ></clr-icon>
        <clr-icon
          shape="exclamation-circle"
          class="is-warning"
          (click)="setOp100()"
          *ngIf="operativity > 0 && operativity < 100"
        ></clr-icon>
        <clr-icon
          class="is-error is-error is-solid"
          shape="exclamation-triangle"
          *ngIf="isEnding"
        ></clr-icon>
        <clr-icon
          class="is-info is-solid"
          shape="info-standard"
          *ngIf="os.showI && isNew"
        ></clr-icon>
        {{ name }}
        <span *ngIf="mods && mods > 0" class="badge badge-info">
          <app-formatted-quantity
            [quantity]="mods"
            [integer]="true"
            [monospace]="false"
          ></app-formatted-quantity>
        </span>
      </span>
    </span>
    <span
      class="clr-col clr-align-self-center text-right"
      *ngIf="c.abs().gt(0.001)"
    >
      <span [class.text-danger]="isEnding">
        <app-formatted-quantity [quantity]="c"> </app-formatted-quantity>
        <span class="monospace"> /秒</span>
      </span>
    </span>
    <span
      class="clr-col clr-align-self-end text-right"
      [class.text-danger]="cap"
    >
      <app-formatted-quantity
        *ngIf="quantity.abs().gt(0.001)"
        [quantity]="quantity"
      >
      </app-formatted-quantity>
    </span>
  </span>
</a>
